<template>
  <div>
    <button class="hello" id="run" @click="test">开始</button>
  </div>
</template>

<script>
import { EventBus } from '../utils/EventBus.js'
export default {
  name: "HelloWorld",
  data() {
    return {
      lushu: undefined,
      isMap: true,
      map: undefined,
      videos: [],
      avatarUrl: {},
      touchSTime: 0,
      deltaTime: 200,
      currentTarget: undefined,
      mapConfig: {}
    };
  },
  methods: {
    onInitMap(data) {
        let that = this;
        this.videos = data;
        this.map = this.createBaiduMap();
        
        //get location
        this.getLocation()
        //this.getRouteAnimation()
        this.initShip()
    },
    initShip(){
      this.map.addOverlay(new BMap.Marker(new BMap.Point(109.7371,18.280158), {
          icon: new BMap.Icon("https://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 26))
      }));
    },
    getRouteAnimation(startPoint){
      const that = this;
      //实例化一个驾车导航用来生成路线
      var drv = new BMap.DrivingRoute('北京', {
        onSearchComplete: function(res) {
          if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
            var plan = res.getPlan(0);
            debugger
            var arrPois =[];
            for(var j=0;j<plan.getNumRoutes();j++){
                var route = plan.getRoute(j);
                arrPois= arrPois.concat(route.getPath());
            }
            that.map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: 'red'}));
            that.map.setViewport(arrPois);
            that.lushu = new BMapLib.LuShu(that.map,arrPois,{
              defaultContent:"",//"从天安门到百度大厦"
              autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
              icon  : new BMap.Icon('https://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
              speed: 300000,
              enableRotation:false,//是否设置marker随着道路的走向进行旋转
            })
          }
        }
      });
      var start=new BMap.Point(startPoint.lng, startPoint.lat);
      var SanYa=new BMap.Point(109.7371,18.280158);
      var MarianaTrench = new BMap.Point(140.643201,19.573847)
      drv.search(start, SanYa);
      //drv.search(SanYa, MarianaTrench);
      var TestPoint = new BMap.Point(104.076195,30.586456)
    },
    getLocation(){
      const that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        //this.map.panTo(r.point);
        if(this.getStatus() == 0){
          EventBus.$emit("Map-Geolocation", {
            "lng": r.point.lng,
            "lat": r.point.lat
          })
          //map.addOverlay(mk);
          //map.panTo(r.point);
          //alert('您的位置：'+r.point.lng+','+r.point.lat);
          //拒绝获取地理位置：accuracy 为 null ；同意： accuracy 不为 null
          console.log(this.getStatus())
          console.log('直接告诉您的位置：'+r.point.lng+','+r.point.lat);
          if (r.accuracy == null) { //用户拒绝地理位置授权
              alert('不告诉我你在哪，怎么带你去深潜呢');
              return;
          }
        }
        else {
          alert('failed'+this.getStatus());
        }
      },{enableHighAccuracy: true})
      //关于状态码
      //BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
      //BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
      //BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
      //BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
      //BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
      //BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
      //BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
      //BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
      //BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
    },
    test(){
      this.lushu.start()
    },
    $(element){
      return document.getElementById(element);
    }
  },
  created() {
    EventBus.$on("Map-Geolocation", item => {
      this.getRouteAnimation(item)
    })
    
    this.onInitMap()
  },
  async mounted() {
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello {
  position: relative;
  z-index: 999;
  font-family: PingFangSC-Medium, PingFang SC;
}
.hello-top {
  width: 375px;
  position: relative;
  margin-top: 30px;
}
.hello-top-icon {
  width: 355px;
  height: 94px;
}
.hello-ball {
  width: 82px;
  height: 91.5px;
  position: fixed;
  left: 284px;
  bottom: 100px;
}
.hello-bottom-icon {
  width: 375px;
  height: 48px;
  position: fixed;
  left: 0;
  bottom: 0px;
}
.hello-bottom-title {
  position: fixed;
  left: 105px;
  bottom: 12px;
  font-size: 15px;
  font-weight: 500;
  color: white;
  letter-spacing: 4px;
}
.anim-opacity2 {
  position: absolute;
  width: 72px;
  height: 110px;
  left: -10px;
  top: -84px;
  animation: 2s opacity2 infinite;
  -webkit-animation: 2s opacity2 infinite;
  -moz-animation: 2s opacity2 infinite;
}
@keyframes opacity2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes opacity2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes opacity2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
</style>
